<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" style="width: 100px;height: 100px; background: pink;"></div>

<!-- DOM0 -->
<script>
  let box = document.querySelector(".box");

  // DOM0事件绑定
  // 一个事件只能绑定一个
  box.onclick = function (ev) {
    console.log("DOM0 CLICK", ev);
  };

  /** 模拟事件触发*/
  // DOM0 能通过api调用触发事件
  setTimeout(()=>{
    //box.onclick() //缺少事件对象
  },1000);
</script>

<!-- DOM2 -->
<script>
  //DOM2事件绑定
  //开始有 【事件池】 的概念
  //可以给当前元素的某个事件绑定多个方法
  //但DOM2无法像DOM0一样通过api调用触发事件,但可以通过 document.createEvent 来模拟
  box.addEventListener('click', function (ev) {
    console.log('DOM2 CLICK', ev)
  });

  /** 模拟事件触发*/
  setTimeout(()=>{
    //1.手动创建事件
    let ev = document.createEvent("MouseEvent");
    ev.initMouseEvent('click', true, true);

    //2.自动触发
    box.dispatchEvent(ev); //也可以触发DOM0绑定的事件,比如这里创建的是一个自定义的MouseEvent事件---click,但由于同名(click),也会触发 box.onclick 这样绑定的DOM0级事件
/*
DOM0 CLICK MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}
DOM2 CLICK MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}
* */
  },1000);
</script>

<!-- DOM3 -->
<script>
/*
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

事件类型	说明	举例
UI事件	当用户与页面上的元素交互时触发	load、scroll
焦点事件	当元素获得或失去焦点时触发	blur、focus
鼠标事件	当用户通过鼠标在页面执行操作时触发	dbclick、mouseup
滚轮事件	当使用鼠标滚轮或类似设备时触发	mousewheel
文本事件	当在文档中输入文本时触发	textInput
键盘事件	当用户通过键盘在页面上执行操作时触发	keydown、keypress
合成事件	当为IME（输入法编辑器）输入字符时触发	compositionstart
变动事件	当底层DOM结构发生变化时触发	DOMsubtreeModified

同时DOM3级事件也允许开发人员自定义一些事件。
*/
</script>

<!-- 自定义事件 -->
<script>
  //以上所有绑定的事件 必须是内置有的
  //那么 如果你想绑定一个 自定义的 呢？
  /*box.addEventListener('ahh', function () {

  });*/
  //可以通过发布订阅模式实现

  //但其实可靠原生api实现
  let e = document.createEvent("CustomEvent"); //固定的
  e.initCustomEvent(
    "ahhh",
    true/*← 是否冒泡*/,
    true/*← cancelable。如果用 preventDefault() 方法可以取消与事件关联的默认动作,则为 true,否则为 fasle。*/,
    /*随便写→*/{clientX: 10, clientY: 20}
  );
  box.addEventListener('ahhh', ev => {
    console.log(ev);
  });

  setTimeout(()=>{
    //box.dispatchEvent(e)
  },1000)
</script>
</body>
</html>
